<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
<style type="text/css">
	*{margin: 0;padding: 0;list-style: none;}
	body{overflow: hidden;}
	#div{
		width: 640px;height: 400px;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;box-shadow: 0 0 10px black;
	}

	#div>div{
		width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index:1;
	}


</style>

</head>
<body>
	<div id='div'>
		
	</div>
	<script type="text/javascript">
	var imgSrc = ['1.jpg','2.jpg','3.jpg'];
	var index = 0;
	var zIndex = 99999999;
	startBang(random(3,9),random(3,9));
	function random(min,max){
		return parseInt(Math.random()* (max - min)) + (++min);
	};

	function startBang(x,y){
		var X = x;
		var Y = y;

		var codeNode = document.createElement('div');
		codeNode.style.zIndex = zIndex;
		zIndex--;
		div.appendChild(codeNode);

		for(var i = 0;i < Y; i++){
			for(var j = 0; j < X ;j++){
				var w = div.offsetWidth / X;
				var h = div.offsetHeight / Y;
				var oDiv = document.createElement('div');
				oDiv.style.width = w +'px';
				oDiv.style.height = div.offsetHeight / Y +'px';
				oDiv.style.float = 'left';
				oDiv.style.background = 'url('+imgSrc[index]+')';
				oDiv.style.backgroundPositionX = -w * j + 'px';
				oDiv.style.backgroundPositionY = -h * i + 'px'
				codeNode.appendChild(oDiv);
			}
		};

		

		setTimeout(function(){

			for(var i = 0;i<codeNode.children.length;i++){
				codeNode.children[i].style.transition = ((Math.random() * 2.5)+0.5)+'s all ease';
				codeNode.children[i].style.transform = 'perspective(800px) translateX('+random(-300,300) +'px) translateY('+ random(-300,300) +'px) rotateX('+random(-720,720) +'deg) rotateY('+random(-720,720) +'deg) scale('+Math.random()*3+','+Math.random()*3+')' ;
				codeNode.children[i].style.opacity = 0;
			}
			index++;
			if(index == imgSrc.length)index = 0;
			startBang(random(3,9),random(3,9));
		},3000);

		setTimeout(function(){
			codeNode.parentNode.removeChild(codeNode);

		},6000);
	}

	</script>
</body>
</html>